@import "./common/mixin.scss";
@import "./common/vars.scss";
@import "./common/utils.scss";

@include module(checkbox) {
  display: inline-block;
  font-size: 0;
  cursor: pointer;
  & + & {
    margin-left: 10px;
  }

  padding: 10px 0;

  &:hover {
    .as-checkbox__inner {
      border: solid 1px $--color-primary;
    }
  }

  @include utils-user-select(none);
  @include when(disabled) {
    cursor: not-allowed;
  }
  @include element(input) {
    display: inline-block;
    vertical-align: top;
  }
  @include element(inner) {
    box-sizing: border-box;
    display: inline-block;
    border: solid 1px $--border-color-base;
    width: $--checkbox-default-out-size;
    height: $--checkbox-default-out-size;
    border-radius: $--checkbox-default-border-radius;
    vertical-align: top;
    position: relative;

    @include when(disabled) {
      border-color: mix(
        $--color-white,
        $--border-color-base,
        $--color-disabled-percent
      );
      &:before {
        box-shadow: -1px 1px 0px 0 rgba(75, 67, 67, 0.1);
      }
    }

    &:after {
      content: "";
      transition: all 0.4s ease;
      position: absolute;
      top: 50%;
      left: 50%;
      width: 8px;
      height: 3px;
      box-sizing: border-box;
      background: $--color-white;
      box-shadow: 1px 1px 0px 0 rgba(0, 0, 0, 0.2);
      transform: translate3d(-50%, -50%, 0) scale(0);
    }
    @include when(indeterminate) {
      background: $--color-primary;
      border: solid 1px $--color-primary;
      &:after {
        content: "";
        transition: all 0.4s ease;
        position: absolute;
        top: 50%;
        left: 50%;
        width: 8px;
        height: 3px;
        box-sizing: border-box;
        background: $--color-white;
        box-shadow: 1px 1px 0px 0 rgba(0, 0, 0, 0.2);
        transform: translate3d(-50%, -50%, 0) scale(1);
      }
    }

    &:before {
      content: "";
      transition: all 0.2s ease;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -4px;
      margin-top: -3px;
      width: 8px;
      height: 4px;
      box-sizing: border-box;
      border: solid 2px $--color-white;
      border-top: none;
      border-right: none;
      box-shadow: -1px 1px 0px 0 rgba(0, 0, 0, 0.2);
      transform: rotate(-45deg) scale(0);
    }

    @include when(checked) {
      background: $--color-primary;
      border: solid 1px $--color-primary;
      @include when(disabled) {
        border-color: mix(
          $--color-white,
          $--color-primary,
          $--color-disabled-percent
        );
        background: mix(
          $--color-white,
          $--color-primary,
          $--color-disabled-percent
        );
      }

      &:before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -4px;
        margin-top: -3px;
        width: 8px;
        height: 4px;
        box-sizing: border-box;
        border: solid 2px $--color-white;
        border-top: none;
        border-right: none;
        box-shadow: -1px 1px 0px 0 rgba(0, 0, 0, 0.2);
        transform: rotate(-45deg) scale(1);
      }
    }
  }
  @include element(label) {
    font-weight: bold;
    padding-left: 10px;
    line-height: 1;
    display: inline-block;
    font-size: $--checkbox-default-font-size;
    vertical-align: top;
    color: $--color-text-regular;
    & > span {
      display: inline-block;
      font-weight: bold;
    }
    @include when(disabled) {
      color: mix(
        $--color-white,
        $--color-text-regular,
        $--color-disabled-percent
      );
    }
  }

  @include modifier(small) {
    padding: 8px 0;
    .as-checkbox__inner {
      width: $--checkbox-small-size;
      height: $--checkbox-small-size;
    }
    .as-checkbox__label {
      font-size: $--checkbox-small-size;
    }
  }
  @include modifier(mini) {
    padding: 6px 0;
    .as-checkbox__inner {
      width: $--checkbox-mini-size;
      height: $--checkbox-mini-size;
    }
    .as-checkbox__label {
      font-size: $--checkbox-mini-size;
    }
  }
}

// .as-checkbox-button
@include module(checkbox-button) {
  & + & {
    margin-left: 10px;
  }

  font-size: 0;
  transition: all 0.2s ease;
  display: inline-block;
  padding: $--button-default-padding-vertical
    $--button-default-padding-horizontal;
  border-radius: $--border-radius-base;
  border: solid 1px $--border-color-base;

  cursor: pointer;
  @include utils-user-select(none);
  position: relative;

  border-top-left-radius: $--border-radius-base;
  border-bottom-left-radius: $--border-radius-base;
  border-top-right-radius: $--border-radius-base;
  border-bottom-right-radius: $--border-radius-base;

  &:focus,
  &:hover {
    .as-checkbox-button__label {
      color: mix($--color-white, $--color-text-regular, $--color-hover-percent);
    }
  }

  &:active {
    .as-checkbox-button__label {
      color: mix($--color-black, $--color-text-regular, $--color-hover-percent);
    }
  }

  @include when(disabled) {
    cursor: not-allowed;
  }

  @include when(checked) {
    z-index: 1;
    background: $--color-primary;
    border-color: $--color-primary;

    @include when(disabled) {
      background: mix(
        $--color-white,
        $--color-primary,
        $--color-disabled-percent
      );
      border-color: mix(
        $--color-white,
        $--color-primary,
        $--color-disabled-percent
      );
    }
  }

  // .as-checkbox__inner
  @include element(inner) {
    & > input {
      display: none;
    }
  }

  @include element(label) {
    line-height: 1;
    vertical-align: middle;
    cursor: pointer;
    display: inline-block;
    font-weight: bold;
    font-size: $--font-size-base;
    color: $--color-text-regular;

    @include when(checked) {
      color: $--color-white;
    }

    @include when(disabled) {
      cursor: not-allowed;

      color: mix(
        $--color-white,
        $--color-text-regular,
        $--color-disabled-percent
      );

      @include when(checked) {
        color: mix($--color-white, $--color-white, $--color-disabled-percent);
      }
    }
  }

  @include modifier(small) {
    padding: $--button-small-padding-vertical $--button-small-padding-horizontal;
    .as-checkbox-button__label {
      font-size: $--button-small-font-size;
    }
  }

  @include modifier(mini) {
    padding: $--button-mini-padding-vertical $--button-mini-padding-horizontal;
    .as-checkbox-button__label {
      font-size: $--button-mini-font-size;
    }
  }
}

@include module(checkbox-group) {
  font-size: 0;
  @include module(checkbox-button) {
    margin-left: 0;
    &:first-child,
    &:last-child {
      border-top-left-radius: $--border-radius-base;
      border-bottom-left-radius: $--border-radius-base;
      border-top-right-radius: $--border-radius-base;
      border-bottom-right-radius: $--border-radius-base;
    }

    &:first-child {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
      @include when(checked) {
        border-right: solid 1px mix($--color-white, $--color-primary, 50%);
      }
    }
    &:last-child {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
      @include when(checked) {
        border-left: solid 1px mix($--color-white, $--color-primary, 50%);
      }
    }

    &:not(:last-child):not(:first-child) {
      border-top-left-radius: 0;
      border-bottom-right-radius: 0;
      border-bottom-left-radius: 0;
      border-top-right-radius: 0;
      @include when(checked) {
        border-left: solid 1px mix($--color-white, $--color-primary, 50%);
        border-right: solid 1px mix($--color-white, $--color-primary, 50%);
      }
    }

    &:not(:last-child) {
      margin-right: -1px;
    }
  }
}
